<template>
    <s-box title="重点机构排名" :left="true" ref="loading">
        <div class="flex-wrap">
            <div class="chart-wrap chart-ranking" ref="chart">
                <div class="ranking-item" :class="{active:item.active}" v-for="(item,index) in rankings" :key="item.id" @click.stop="change(item,index)">
                    <div class="ranking-progress-wrap">
                        <div class="ranking-progress">
                            <div class="ranking-pro-inner" :style={width:comput(item,rankings)}><span class="ranking-score">{{item.value}}</span></div>
                        </div>
                    </div>
                    <div class="ranking-name-wrap">
                        <span class="ranking-name" >{{item.text}}</span>
                    </div>
                </div>
            </div>
            <div class="col">
                <c-panel ref="panel"></c-panel>
            </div>
        </div>
    </s-box>
</template>
<script>
import delegate from '../js/event.js';
import echarts from "echarts";
import data2 from "./guanxi.json";
import mixin from '../js/mixin.js';
import CPanel from '../chart/Chart_o_panel.vue';
export default {
    mixins:[mixin],
    components: {
        CPanel,
    },
    data() {
        return {
           rankings:[]
        }
    },
    mounted(){
        this._initMethod();

        // 监听panel
        this.$on('change',(current)=>{
             this.$nextTick(()=>{
                this.$refs.panel._initChart(current)
            })
        })
    },
    beforeDestroy(){
        // 移除事件
        delegate.$off('s-search',this._initSearch);
        delegate.$off('s-resize',this._initChart)
    },
    methods: {
        _initMethod() {
            delegate.$on('s-search',this._initSearch);
            delegate.$on('s-resize',this._initChart);
        },
        _initSearch(obj) {

        },
        _getOrgslist(){
            if(!this.navCurrentId) return;
            let rankings = [];
            this.api({
                    url: "organalyse/importantOrgList",
                    method: "post",
                    data:`topicId=${this.navCurrentId}`
            }).then(data => {
                this.$refs.loading.hide();
                data.forEach((item,index) =>{
                    var orginfo = {};
                    orginfo.id = item.coid;
                    orginfo.text = item.coname;
                    orginfo.value = item.ctanum;
                    orginfo.percent = 0;
                    rankings.push(orginfo);
                })

                rankings.forEach((item,index) =>{
                    if(index == 0){
                        item.active = true;
                    }else{
                        item.active = false;
                    }
                })
                if(rankings.length != 0){
                    this.$emit('change',rankings[0],0)
                }
                this.$set(this,'rankings',rankings)
            }).catch((error) =>{ this.$refs.loading.hide()})
        },
        _initChart(){
            this.$refs.loading.show();
            this._getOrgslist();
        },
        change(current,index){
            this.rankings.forEach((item,index) =>{
                if(current.id == item.id){
                    item.active = true;
                }else{
                    item.active = false;
                }
            })
            this.$emit('change',current,index)
        },
        comput(item,list){
            var max = 0;
            list.forEach(items => {
                if(items.value > max){
                    max = items.value*1
                }
            });
            let percent = item.value*1/max;
            return Math.floor(percent*100) + '%';
        }
    },
}
</script>
<style lang="scss" scoped>
  .flex-wrap{
      display: flex;
      .col{
          flex: 1;
          padding-left: 10px;
      }
  }
  .chart-wrap{
      flex: 0 0 600px;
      padding-top: 20px;
      padding-left: 10px;
      padding-right: 10px;
        .ranking-item{
            display: flex;
            align-items: center;
            height: 40px;
            cursor: pointer;
            .ranking-progress-wrap{
                flex: 1;
                padding-right: 30px;
                .ranking-progress{
                    height: 19px;
                    .ranking-pro-inner{
                       position: relative;
                       height: 100%;
                       background: linear-gradient(90deg,#0060ff,#00a8ff);
                       border-radius: 14px;
                       width: 30%;
                       span{
                           display: flex;
                           padding-left: 3px;
                           align-items: center;
                           position: absolute;
                           top: 0;
                           right: 0;
                           bottom: 0;
                           color: #98caec;
                           transform: translatex(100%);
                           font-weight: 600;

                       }
                    }
                }
            }
            .ranking-name-wrap{
                text-align: right;
                align-items: center;
                min-width: 150px;

                .ranking-name{
                    color: #98caec;
                    font-size: 13px;
                    text-align: right;
                }
            }
            &.active{
                .ranking-name-wrap .ranking-name {
                    color: #fff;
                }
            }
        }
  }
</style>
